<template>
  <div class="container">
    <div class="title-wrap">
      <!--      <h2 v-if="form.isIncome === 0" class="label">{{$t('user.unsettledRecords')}}</h2>-->
      <!--      <h2 v-else-if="form.isIncome === 1" class="label">{{$t('user.settledRecords')}}</h2>-->
      <h2 class="label">{{ $t('user.commissionDetails') }}</h2>
      <Select v-model="form.isIncome" @on-change="onSearch" style="width:200px">
        <Option :value="2">{{ $t('user.all') }}</Option>
        <Option :value="0">{{ $t('user.unsettled') }}</Option>
        <Option :value="1">{{ $t('user.settled') }}</Option>
      </Select>
    </div>
    <Tabs :value="currentTab" @on-click="changeTab">
      <TabPane :label="$t('user.promotionAlliance')" name="commission"></TabPane>
      <TabPane :label="$t('user.commission_tab')" name="activityDetail"></TabPane>
    </Tabs>
    <Table width="1220"
      v-if="dataList.length > 0 && (form.commissionType == '' || form.commissionType == 'INVITE_USER')"
      :columns="columns" :data="dataList">
    </Table>
    <!-- 活动佣金 -->
    <Table v-if="dataList.length > 0 && form.commissionType == 'SHARE_REWARD'" :columns="activityColumns"
      :data="dataList">
    </Table>
    <div v-if="loading">
      <t-loading></t-loading>
    </div>
    <t-no-data v-if="!loading && dataList.length == 0"></t-no-data>
    <div class="page">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
        :page-size="form.pageSize" show-sizer />
    </div>
  </div>
</template>
<script>
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import { commissionList } from "@/api/invite";

export default {
  components: { TNoData, TLoading },
  data() {
    return {
      loading: false,
      dataList: [],
      form: {
        pageNo: 1, // 页
        pageSize: 20, // 页数
        isIncome: 2, // 0未结算/1已结算
        commissionType: ''
      },
      activityColumns: [
        {
          title: this.$t('user.date'),
          fixed: 'left',
          key: 'createTime'
        },
        {
          title: this.$t('user.settlementDate'),
          key: 'month'
        },
        {
          // 状态
          title: this.$t('user.status'),
          render: (h, params) => {
            let row = params.row;
            let text;
            switch (row.isIncome) {
              case 0:
                text = this.$t('user.unsettled');
                break;
              case 1:
                text = this.$t('user.settled');
                break;
            }
            return h('span', {
              style: {
                color: row.isIncome == 0 ? '#EDAF41' : '#51B481'
              }
            }, text);
          }
        },
        {
          title: this.$t('user.commissionAmount'),
          render: (h, params) => {
            let row = params.row;
            return h('span', {

            }, row.currency + row.commission);
          }
        },
        {
          title: this.$t('pay.remark'),
          key: 'remark'
        },
      ],
      columns: [
        {
          title: this.$t('user.date'),
          fixed: 'left',
          width: 150,
          key: 'createTime'
        },
        {
          title: this.$t('user.settlementDate'),
          width: 120,
          key: 'month'
        },
        {
          // 状态
          title: this.$t('user.status'),
          width: 120,
          render: (h, params) => {
            let row = params.row;
            let text;
            switch (row.isIncome) {
              case 0:
                text = this.$t('user.unsettled');
                break;
              case 1:
                text = this.$t('user.settled');
                break;
            }
            return h('span', {
              style: {
                color: row.isIncome == 0 ? '#EDAF41' : '#51B481'
              }
            }, text);
          }
        },
        {
          title: this.$t('user.commissionAmount'),
          width: 120,
          render: (h, params) => {
            let row = params.row;
            return h('span', {

            }, row.currency + row.commission);
          }
        },
        {
          // 分佣级别
          title: this.$t('user.commissionLevel'),
          width: 120,
          key: 'commissionLevel',
          render: (h, params) => {
            let row = params.row;
            let text;
            switch (row.commissionLevel) {
              case 1:
                text = this.$t('user.firstLevelCommission');
                break;
              case 2:
                text = this.$t('user.secondLevelCommission');
                break;
              case 3:
                text = this.$t('user.thirdLevelCommission');
                break;
            }
            return h('span', {

            }, text);
          }
        },
        // {
        //   title: this.$t('user.commissionPercentage'),
        //   width: 100,
        //   key: 'commissionRate',
        //   render: (h, params) => {
        //     let row = params.row;
        //     return h('span', {

        //     },row.commissionRate + '%');
        //   }
        // },
        {
          title: this.$t('user.waybillCreationDate'),
          width: 150,
          key: 'expressCreateTime'
        },
        {
          title: this.$t('user.waybillCompletionDate'),
          width: 150,
          key: 'expressCompleteTime'
        },
        {
          title: this.$t('user.waybillNumber'),
          width: 120,
          key: 'expressOrderNo'
        },
        {
          title: this.$t('user.waybillAmount'),
          width: 150,
          key: 'orderAmount',
          render: (h, params) => {
            let row = params.row;
            return h('span', {

            }, row.currency + row.orderAmount);
          }
        },
        {
          title: this.$t('user.actualPaymentAmount'),
          width: 150,
          key: 'payAmount',
          render: (h, params) => {
            let row = params.row;
            return h('span', {

            }, row.currency + row.payAmount);
          }
        },
        {
          title: this.$t('user.inviterUserID'),
          width: 140,
          key: 'inviterId'
        },
        {
          title: this.$t('user.inviterUsername'),
          width: 140,
          key: 'inviterUsername'
        },
        {
          title: this.$t('user.promotionLevel'),
          width: 140,
          key: 'promoteLevel'
        },
        {
          title: this.$t('user.promotionPoints'),
          width: 140,
          key: 'promoteScore'
        }
      ],
      totalPage: 1,
      currentTab: 'commission'
    }
  },
  created() {
    if (this.$route.query.type) {
      this.form.isIncome = Number(this.$route.query.type);
    }
    this.getDataList();
  },
  methods: {
    changeTab(val) {
      if (val == 'activityDetail') {
        this.form.commissionType = 'SHARE_REWARD';
      } else {
        this.form.commissionType = 'INVITE_USER';
      }
      this.getDataList();
    },
    onSearch() {
      this.form.pageSize = 20;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onPage(index) {
      // 下一页
      this.form.pageNo = index;
      this.getDataList();
    },
    getDataList() {
      // 佣金结算记录-分页列表查询
      this.loading = true;
      commissionList({ ...this.form, isIncome: this.form.isIncome == 2 ? '' : this.form.isIncome }).then((res) => {
        this.dataList = res.result.records;
        this.totalPage = res.result.pages;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.title-wrap {
  display: flex;
  justify-content: space-between;
  color: @t-title-color;
  margin-bottom: 16px;

  .record {
    cursor: pointer;
    color: @primary-color;
    font-size: 14px;
  }
}

:deep(.ivu-tabs) {
  margin-bottom: 24px;
}

.page {
  text-align: right;
  margin: 30px;
}
</style>